Integrated Development Environments (IDEs) are software tools that typically allow developers (e.g., web developers, application developers, and the like) to create web pages, websites, interactive applications, and the like that various users may access and execute via the Internet, intranets, or on a local client computer. Mulitple IDEs exist in the marketplace, such as Adobe Systems Incorporated's DREAMWEAVER®, GO LIVE®, FLASH®, FLEXBUILDER™, Borland Software Corporation's DELPHI®, and the like. Some IDEs, such as DREAMWEAVER®, GO LIVE®, and the like, provide an application environment for web developers to design Internet documents, such as those defined in Hypertext Markup Language (HTML), Extensible Markup Language (XML), Extensible HTML (XHTML), Active Server Page (ASP), COLDFUSION® Markup Language (CFML®), and the like, in both a text-based code editor and a graphical-based design time environment.
The text-based code view presents the source code as text in a portion of the design screen and allows the developer to edit the code directly in the document file. For example, a web developer may write and edit HTML or Cascading Style Sheets (CSS) code in the code view. The design view, on the other hand, is a What You See Is What You Get (WYSIWYG) view of the final document that allows the user to visually manipulate the interpreted and graphically laid-out version of the document, such as, for example, by dragging, dropping, cutting, and pasting visual components. As the developer works, changes to the document may be reflected in both the code view and the design view.
One feature that is often supported by various IDEs is a code collapse. Code collapse is the ability to hide code or rendered content or visually replace portions of the code or rendered content in a document with a representative image or button, in effect, hiding or reducing the screen space to bring other portions of the code into more relative view of the user. Moreover, when hiding the rendered content, the user may view the rendered document without the collapsed/hidden content. Users typically employ such a feature to hide portions of the code or rendered content that they are not presently working with or to bring two or more portions of the code closer together so that scrolling is not necessary to view them at the same time. Additionally, some code collapsing features are used to hide code that may be proprietary or to hide rendered content that may be confidential or proprietary.
FIG. 1A is a screenshot illustrating IDE 100 having code view 101. Code view 101 contains three representative sections of code, Code A, Code B, and Code C. It should be understood that actual code would be in the sections marked Code A, Code B, and Code C. Code view 101 shows selection area 102 in which the user has selected Code B. In preparing to collapse a section of code, a user will typically select the particular code that he or she desires to collapse using a mouse or other such pointing device. The developer then activates the code collapse feature by making a menu selection or other such activation indicator, such as by selecting widget 103 in the gutter area of code view 101. Internally, the code defining IDE 100 notes the region of Code B by placing markers that capture the range that was selected in selection area 102.
FIG. 1B is a screenshot illustrating IDE 100 after the user selects to collapse Code B. After selecting widget 103, the text of Code B is removed from code view 101, collapsing down to code collapse button 104. Once collapsed, the user can see more of Code C within code view 101. The user also sees a closer visual relation between Code A and Code C. In order to reverse the code collapse, the user would typically select code collapse button 104, which would return the text of Code B to its original location.
The general limitation to code collapse features is that the user generally has to navigate to the specific code that he or she desires to collapse, highlight the desired code, and then select to collapse that code. While the feature provides benefit to coders, designers, and developers, it is still a tedious process to select multiple groups of code text and individually collapse each selected group.